<script>
import { Icon } from 'vant'

export default {
  components: {
    [Icon.name]: Icon
  },
  props: {
    icon: {
      type: [String, Number],
      required: true
    },
    matched: {
      type: [Boolean, undefined],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      opened: false,
      unmatched: false
    }
  },
  computed: {
    className() {
      return {
        'icon-card': true,
        'icon-card--open': this.opened,
        'icon-card--disabled': this.disabled,
        'icon-card--matched': this.matched,
        'icon-card--unmatched': this.unmatched
      }
    }
  },
  watch: {
    matched(val) {
      if (val === false) {
        this.unmatched = true
      }
    }
  },
  methods: {
    onAnimationEnd() {
      if (!this.unmatched) {
        return
      }
      this.unmatched = false
      this.opened = false
      this.$emit('reset')
    },
    toggleOpen() {
      if (this.opened) {
        return
      }
      this.opened = !this.opened
      this.$emit('click')
    }
  }
}
</script>

<template>
  <div
    ref="el"
    :class="className"
    @animationend="onAnimationEnd"
    @click="toggleOpen"
  >
    <van-icon
      v-if="(typeof icon === 'string')"
      :name="icon"
    />
    <span v-else>{{ icon }}</span>
  </div>
</template>

<style lang="less">
.icon-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, .3);
  color: transparent;
  background-color: lightslategrey;
  font-size: 100px;

  &--open, &--preview {
    background-color: #1989fa;
    color: #ffffff;
    animation-name: flipInY;
    animation-duration: .75s;
    backface-visibility: visible;
  }

  &--disabled {
    pointer-events: none;
  }

  &--preview {
    pointer-events: none;
  }

  &--matched {
    background-color: #07c160;
    animation-name: rubberBand;
  }

  &--unmatched {
    background-color: #ee0a24;
    animation-name: pulse;

    & ~ .icon-card {
      pointer-events: none;
    }
  }

  @keyframes flipInY {
    from {
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      animation-timing-function: ease-in;
      opacity: 0;
    }

    40% {
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      animation-timing-function: ease-in;
    }

    60% {
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;
    }

    80% {
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
      transform: perspective(400px);
    }
  }

  /* 卡片匹配时的动画 */
  @keyframes rubberBand {
    from {
      transform: scale3d(1, 1, 1);
    }

    30% {
      transform: scale3d(1.25, 0.75, 1);
    }

    40% {
      transform: scale3d(0.75, 1.25, 1);
    }

    50% {
      transform: scale3d(1.15, 0.85, 1);
    }

    65% {
      transform: scale3d(0.95, 1.05, 1);
    }

    75% {
      transform: scale3d(1.05, 0.95, 1);
    }

    to {
      transform: scale3d(1, 1, 1);
    }
  }

  /* 卡片不匹配时的动画 */
  @keyframes pulse {
    from {
      transform: scale3d(1, 1, 1);
    }

    50% {
      transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
      transform: scale3d(1, 1, 1);
    }
  }
}
</style>
